import {
  ArgsTable,
  Canvas,
  Meta,
  Story,
} from '@storybook/addon-docs';
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';

<Meta
  title="Components/Dropdown Button/Dropdown Item"
  component="bl-dropdown-item"
  argTypes={{
    icon: {
      control: {
        type: 'text'
      },
    },
  }}
/>

# Dropdown Item
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Dropdown Item component is a component should be used inside a bl-dropdown or bl-dropdown-group component. It is used to display an action in the these components.

export const Template = (args) => html`
  <bl-dropdown-item
    icon='${ifDefined(args.icon)}'
    ?disabled=${args.disabled}
  >Dropdown Item</bl-dropdown-item>
`

## Basic Usage
<Canvas>
  <Story name="Basic Usage">
    {Template.bind({})}
  </Story>
</Canvas>

## With Icon
If you want to have an icon for your actions, you can use the `icon` attribute.
<Canvas>
  <Story name="With Icon" args={{ icon: "info" }}>
    {Template.bind({})}
  </Story>
</Canvas>

## Disabled
You can disable the item by setting the `disabled` attribute.
<Canvas>
  <Story name="Disabled" args={{ disabled: true }}>
    {Template.bind({})}
  </Story>
</Canvas>

## RTL Support

The dropdown item component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 16px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
            <bl-dropdown-item icon="info">Information</bl-dropdown-item>
            <bl-dropdown-item icon="settings">Settings</bl-dropdown-item>
            <bl-dropdown-item icon="profile" disabled>Profile</bl-dropdown-item>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
            <bl-dropdown-item icon="info">معلومات</bl-dropdown-item>
            <bl-dropdown-item icon="settings">إعدادات</bl-dropdown-item>
            <bl-dropdown-item icon="profile" disabled>الملف الشخصي</bl-dropdown-item>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Dropdown Item RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .flex-container {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="flex-container">
      <!-- LTR Example -->
      <div>
        <h3>LTR Dropdown Items</h3>
        <bl-dropdown label="Options">
          <bl-dropdown-item icon="info">Information</bl-dropdown-item>
          <bl-dropdown-item icon="settings">Settings</bl-dropdown-item>
          <bl-dropdown-item icon="profile" disabled>Profile</bl-dropdown-item>
        </bl-dropdown>
      </div>

      <!-- RTL Example -->
      <div dir="rtl">
        <h3>RTL Dropdown Items</h3>
        <bl-dropdown label="خيارات">
          <bl-dropdown-item icon="info">معلومات</bl-dropdown-item>
          <bl-dropdown-item icon="settings">إعدادات</bl-dropdown-item>
          <bl-dropdown-item icon="profile" disabled>الملف الشخصي</bl-dropdown-item>
        </bl-dropdown>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating dropdown items programmatically
    const createDropdownItems = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const dropdown = document.createElement('bl-dropdown');
      dropdown.label = isRTL ? 'خيارات' : 'Options';

      const items = [
        { icon: 'info', text: isRTL ? 'معلومات' : 'Information' },
        { icon: 'settings', text: isRTL ? 'إعدادات' : 'Settings' },
        { icon: 'profile', text: isRTL ? 'الملف الشخصي' : 'Profile', disabled: true }
      ];

      items.forEach(itemData => {
        const item = document.createElement('bl-dropdown-item');
        item.icon = itemData.icon;
        item.textContent = itemData.text;
        if (itemData.disabled) item.disabled = true;
        dropdown.appendChild(item);
      });

      container.appendChild(dropdown);
      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

<ArgsTable of="bl-dropdown-item" />
